<!-- 个人中心 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


<div style="text-align: center;background-color:#f2f2f2;height:100%" id="app">
    <!-- 头部 -->
    <div style="height:100px;width:100%;background-color:#00b7ea;line-height:80px">
        <div style="height: 80px; width:70%;margin:auto;padding-top:10px">
            <h1 style="color: #ffffff;float:left">541导航</h1>
            <div style="float:right">
                <span style="color:#ffffff"><b>您好，xxx</b></span>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
        </div>
    </div>

    <!-- 中部 -->
    <div style="width:75%;margin:auto">
        <div style="display:inline-block;float:left;width:20%;padding-top:10px;">
               <!-- 左侧导航 -->
                <div style="display:inline-block;">
                    <el-button type="info" plain>首页</el-button>
                    <el-button type="info" id="nav" @click='background("nav","data")' plain>导航管理</el-button>
                    <el-button type="info" id="data" @click='background("data","nav")' plain>个人资料</el-button>
                </div>
        </div>
        <!-- 导航管理 右侧 -->
        <div style="display:inline-block;width:80%;text-align:left;padding-top:45px;">
            <h3><b>导航管理</b></h3>
            <div style="margin-top:20px">
                <span>全选</span>
                <div style="display:inline-block;float:right">
                    <span>新增</span>
                    <span>删除</span>
                </div>
            </div>
            <!-- 记录 -->
            <div style="background-color:#ffffff;height:80px;margin-top:20px;padding:0 20px;
            border-radius: 10px;display:flex;
            justify-content:space-between"
            >
                <div style="display: inline-block;width:40px;line-height:80px">
                    <a style="color:#039be5">起点</a>
                </div>

                <div style="display: inline-block;">
                    <div style="display: inline-block;">
                        <p style="font-size:15px">2021-04-06 14:31:53</p>
                        <p style="font-size:12px;color:#9e9e9e">加入日期</p>
                    </div>

                    <div style="display: inline-block;margin-left:50px;height:40px;width:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding:10px;margin-top:10px;">
                        <div style="display:inline-block; background-color:#ebebeb;height: 50;width:80px;margin-top: -5;padding: 0 5;" @click='mycopy()'>
                            <p>安全码</p>
                            <p id="ma">541</p>
                        </div>
                        <div style="display:inline-block;height: 50;width:90px;margin-top: -5;padding: 0 5;border:1px solid #e0e0e0;text-align:center">
                            <p style="font-size: 14px;color:#aa9eb6;width:80px;" @click="mycopy()">复制安全码</p>
                            <el-button type="primary" size='mini' style="width: 80px;background-color:#27c989">进入</el-button>
                        </div>
                    </div>
                </div>


            </div>


        </div>
    </div>



    <input id="hide" type="text" style="display: none;">


</div>



<script>
let app = new Vue({
        el: '#app',
        data: {
          
        },
        methods:{
            background(id,ids){
                document.getElementById(id).setAttribute('style','background-color: #dbdbdb;');
                document.getElementById(ids).setAttribute('style','background-color: #f2f2f2;');
            },
            mycopy(){
                // 复制需要一个input做中介
                $("#hide").val($("#ma").text());
                $("#hide").select();
                if(document.execCommand("Copy")){
                    this.$message({
                        message: '复制成功',
                        type: 'success'
                    });
                }
                
            }
        }
        
});




</script>

<style>
*{
    margin: 0;
    padding: 0;
}

#app > div:nth-child(2) > div > div:nth-child(1) > button{
    display:block;
    margin:0;   
    width: 180px;
    height: 40px;
    margin-top:30px;
    border:none;
    background-color: #f2f2f2;
    color: #767676;
}

#app > div:nth-child(2) > div > div:nth-child(1) > button:hover{
    background-color:#ebebeb;
}
#app > div:nth-child(2) > div:nth-child(1) > div > button:nth-child(2){
    background-color: #dbdbdb;
    
}
</style>